<template>

	<div class="login">
		<div class="login-box">
			<div class="head">
				<img :src="IMAGE_URL.headerUrl" alt=""/>
			</div>
			<div class="form">
				<img :src="IMAGE_URL.logoSmallUrl" alt="" class="profile-avatar"/>
				<div class="content">
					<div v-if="formVisible" class="title-container">
						<h3 class="title">忘记密码</h3>
					</div>
					<el-form v-if="formVisible" ref="formRef" :model="form" :rules="rules" label-position="left" @submit.prevent>
						<el-form-item prop="email">
							<el-input
									v-model="form.email"
									autofocus
									class="cus-box-shadow"
									clearable
									placeholder="请输入账号绑定的邮箱"
							>
								<template #prepend>
									<icon name="local-ant-mail"/>
								</template>
							</el-input>
						</el-form-item>
						<div class="cus-center-column" style="margin-top: 40px">
							<el-text type="info">如果您的账号没有绑定邮箱，请联系管理员修改密码。</el-text>
							<el-text type="info">微信搜索公众号：幸福工厂游戏工具，私信即可。</el-text>
						</div>
						<div class="cus-center-column" style="margin-top: 40px">
							<el-button :loading="loading" style="width:100%" type="primary" @click.prevent="doForgetPassword">确认</el-button>
						</div>
					</el-form>
					<el-result v-if="resultVisible">
						<template #icon>
							<icon :color="iconColor" :name="iconName" size="60"></icon>
						</template>
						<template #title>
							<div class="title">{{ title }}</div>
						</template>
						<template #sub-title>
							<div class="sub-title">{{ subTitle }}</div>
						</template>
						<template #extra>
							<el-button v-if="backButtonVisible" type="primary" @click="back">返回</el-button>
							<div style="margin-top: 30px">
								<el-text type="info">您现在可以关闭本页面</el-text>
							</div>
						</template>
					</el-result>
				</div>
			</div>
		</div>
	</div>

	<!-- 切换语言 -->
	<div class="switch-language">
		<el-dropdown :hide-on-click="true" :hide-timeout="50" placement="bottom-end" size="large">
			<icon color="var(--el-text-color-secondary)" name="local-cus-lang" size="28"/>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item v-for="item in webConfigStore.lang.langArray" :key="item.value" @click="loadLang(item.value)">
						{{ item.name }}
					</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
	</div>

	<!-- 背景 -->
	<div class="homepage-hero-module">
		<div class="video-container">
			<div class="poster">
				<img :src=IMAGE_URL.moviePoster :style="fixStyle" alt="">
			</div>
		</div>
	</div>

	<!-- 备案号 -->
	<icp></icp>

</template>

<script lang="ts" name="ForgetPassword" setup>

import {onBeforeUnmount, onMounted, reactive, ref} from 'vue'
import {focusFormErrorElement} from '@/utils/commonUtil'
import type {FormInstance, FormRules} from 'element-plus'
import Icon from '@/components/icon.vue'
import {useWebConfigStore} from '@/stores/modules/webConfig.store'
import {useI18n} from 'vue-i18n'
import {loadLang} from '@/lang'
import Icp from '@/components/icp.vue'
import {useEventListener} from '@vueuse/core'
import {forgetPasswordApi} from '@/api/system/forgetPassword.api'
import {IMAGE_URL} from '@/utils/constantsUtil'

const {t} = useI18n()
const webConfigStore = useWebConfigStore()

const formRef = ref<FormInstance>()

const fixStyle = ref()
const loading = ref(false)

const formVisible = ref(true)
const resultVisible = ref(false)
const backButtonVisible = ref(false)
const iconName = ref('el-icon-Loading')
const iconColor = ref('white')
const title = ref('正在加载')
const subTitle = ref('请稍候...')

const form = reactive<ForgetPasswordRequest>({
	email: undefined
})

const rules = reactive<FormRules>({
	email: [
		{required: true, message: t('ruleMessage.email3'), trigger: 'change'},
		{max: 320, message: t('ruleMessage.email1'), trigger: 'change'},
		{type: 'email', message: t('ruleMessage.email2'), trigger: 'change'}
	]
})

const videoSize = () => {
	const windowWidth = document.body.clientWidth
	const windowHeight = document.body.clientHeight
	const windowAspectRatio = windowHeight / windowWidth
	let videoWidth: number
	let videoHeight: number
	if (windowAspectRatio < 0.5625) {
		videoWidth = windowWidth
		videoHeight = videoWidth * 0.5625
		fixStyle.value = {
			height: windowWidth * 0.5625 + 'px',
			width: windowWidth + 'px',
			'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
			'margin-left': 'initial'
		}
	} else {
		videoHeight = windowHeight
		videoWidth = videoHeight / 0.5625
		fixStyle.value = {
			height: windowHeight + 'px',
			width: windowHeight / 0.5625 + 'px',
			'margin-left': (windowWidth - videoWidth) / 2 + 'px',
			'margin-bottom': 'initial'
		}
	}
	return videoSize
}

const back = () => {
	formVisible.value = true
	resultVisible.value = false
}

const doForgetPassword = () => {
	formRef.value?.validate((isValid: boolean) => {
		if (isValid) {
			loading.value = true
			forgetPasswordApi(form).then(() => {
				iconName.value = 'el-icon-CircleCheck'
				iconColor.value = 'var(--el-color-success)'
				title.value = '邮件已发送'
				subTitle.value = '请查收'
				formVisible.value = false
				resultVisible.value = true
				backButtonVisible.value = false
			}).catch(error => {
				iconName.value = 'el-icon-CircleClose'
				iconColor.value = 'var(--el-color-danger)'
				title.value = '出错了'
				subTitle.value = error
				formVisible.value = false
				resultVisible.value = true
				backButtonVisible.value = true
			}).finally(() => {
				loading.value = false
			})
		} else {
			focusFormErrorElement()
		}
	})
}

onMounted(() => {
	useEventListener(window, 'resize', videoSize())
})

onBeforeUnmount(() => {
	window.removeEventListener('resize', videoSize)
})

</script>

<style lang="scss" scoped>
.volume {
	cursor: pointer;
	position: fixed;
	right: 70px;
	top: 20px;
	z-index: 20;
}

.switch-language {
	cursor: pointer;
	position: fixed;
	right: 20px;
	top: 20px;
	z-index: 20;
}

.login {
	align-items: center;
	display: flex;
	height: 100vh;
	justify-content: center;
	position: absolute;
	top: 0;
	width: 100vw;
	z-index: 10;

	.login-box {
		background: var(--cus-bg-color-overlay);
		margin-bottom: 80px;
		overflow: hidden;
		padding: 0;
		width: 430px;
		box-shadow: 0 0 20px black;
	}

	.head {
		background: #ccccff;

		img {
			display: block;
			margin: 0 auto;
			user-select: none;
			width: 430px;
			filter: brightness(80%);
		}
	}

	.form {
		position: relative;

		.profile-avatar {
			display: block;
			height: auto;
			left: calc(50% - 51px);
			position: absolute;
			top: -48px;
			user-select: none;
			width: 102px;
			z-index: 20;
		}

		.content {
			padding: 70px 40px 40px 40px;

			.title {
				font-size: 26px;
				font-weight: bold;
				margin: 0 auto 40px auto;
				text-align: center;
			}

			.sub-title {
				font-size: 18px;
				font-weight: normal;
				margin: 0 auto 30px auto;
				text-align: center;
			}

			.title-container {
				position: relative;

				.title {
					font-size: 26px;
					font-weight: bold;
					margin: 0 auto 40px auto;
					text-align: center;
				}
			}
		}

		.submit-button {
			--el-button-bg-color: var(--el-color-primary);
			font-weight: 300;
			letter-spacing: 2px;
			margin-top: 15px;
			width: 100%;
		}
	}
}

@media screen and (max-width: 720px) {
	.login {
		align-items: center;
		display: flex;
		justify-content: center;

		.login-box {
			margin-top: 0;
			width: 340px;
		}
	}
}

@media screen and (max-height: 800px) {
	.login .login-box {
		margin-bottom: 0;
	}
}

@at-root .dark {
	.login {
		.login-box {
			background: #161b22;
		}

		.form {
			.submit-button {
				--el-button-bg-color: var(--el-color-primary-light-5);
				--el-button-border-color: rgba(240, 252, 241, 0.1);
			}
		}
	}
}

.homepage-hero-module,
.video-container {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.video-container .poster,
.video-container video {
	z-index: 0;
	position: absolute;
	filter: brightness(60%);
	-webkit-filter: brightness(60%);
}

</style>
